<template>
  <view class="history-detail-page">
    
    <view class="content" >
      <!-- 面试信息头部 -->
      <view class="interview-header">
        <text class="position">{{ interviewDetail.jobPosition }}</text>
        <view class="info-row">
          <text class="time">{{ formatDate(interviewDetail.createTime) }}</text>
          <view class="score">
            <text class="score-label">得分：</text>
            <text class="score-value">{{ interviewDetail.score }}</text>
          </view>
        </view>
      </view>
      
      <!-- 聊天记录形式的问答内容 -->
      <view class="chat-container">
        <view 
          v-for="(item, index) in interviewDetail.questions" 
          :key="index" 
          class="chat-item"
        >
          <!-- 问题 - 左侧 -->
          <view class="question-item">
            <view class="avatar interviewer-avatar">AI</view>
            <view class="message question-message">
              <text class="message-text">{{ item.questionContent }}</text>
            </view>
          </view>
          
          <!-- 回答 - 右侧 -->
          <view class="answer-item">
            <view class="message answer-message">
              <text class="message-text">{{ item.answerContent }}</text>
            </view>
            <view class="avatar user-avatar">我</view>
          </view>
        </view>
      </view>
      
      <!-- 面试结果分析 -->
      <view class="analysis-section">
        <view class="section-title">
          <text>面试结果分析</text>
        </view>
        
        <view class="analysis-content">
          <text class="analysis-text">{{ interviewDetail.evaluation }}</text>
        </view>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-content">
        <text>加载中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import NavHeader from '@/components/nav-header.vue'
import { getInterviewDetail, getInterviewQuestionsAndAnswers } from '@/api/interview'

const statusBarHeight = ref(20)
const interviewId = ref('')
const loading = ref(true)

// 模拟面试详情数据
const interviewDetail = ref({
  id: 'mock-id',
  position: '前端开发工程师',
  score: 85,
  createTime: '2023-05-20T14:30:00',
  questions: [
    {
      question: '请简单介绍一下你自己和你的工作经历。',
      answer: '我是一名前端开发工程师，有5年的工作经验。目前主要使用Vue.js和React进行Web应用开发。我曾在某科技公司负责电商平台的前端开发，主导了多个核心功能模块的设计和实现，包括商品搜索、购物车和支付流程等。'
    },
    {
      question: '你为什么对我们公司的这个职位感兴趣？',
      answer: '贵公司在行业内拥有很好的口碑，尤其是在技术创新方面。我关注到贵公司正在推进的微服务架构和前端组件化体系建设，这与我的专业方向和职业规划非常契合。我希望能够加入贵公司，参与这些有挑战性的项目，同时也能够在专业技术上有更多的成长。'
    },
    {
      question: '描述一个你在工作中遇到的挑战，以及你是如何解决的？',
      answer: '在上一个项目中，我们需要处理大量数据的实时渲染问题，页面性能严重下降。为了解决这个问题，我首先通过Performance工具定位到了性能瓶颈，发现是过度渲染和数据处理导致的。我通过引入虚拟滚动技术和实现数据分片加载，同时优化了React组件的渲染逻辑，最终将页面加载时间从原来的3秒降低到了0.8秒，大大提升了用户体验。'
    },
    {
      question: '你认为自己的优势和不足是什么？',
      answer: '我的优势在于扎实的前端技术基础和较强的问题解决能力，能够快速定位和解决复杂的技术问题。同时，我有良好的团队协作能力，善于与不同角色的团队成员沟通。不足方面，我认为自己在UI设计感觉上还有提升空间，目前正在通过学习设计原则和用户体验相关知识来弥补这一短板。'
    },
    {
      question: '你对未来的职业规划是什么？',
      answer: '短期内，我希望能够成为团队中的技术骨干，深入掌握前端架构设计和性能优化技术。中长期规划是向全栈开发方向发展，同时提升自己的项目管理能力，未来希望能够担任技术团队的管理角色，带领团队实现更有挑战性的项目目标。'
    }
  ],
  analysis: '面试表现优秀，展示了扎实的技术基础和清晰的表达能力。对问题的回答条理清晰，能够举具体的例子说明问题。职业规划部分表现出了明确的目标和发展方向，整体来看是非常有潜力的候选人。'
})

// 获取面试详情
const fetchInterviewDetail = async (id) => {
  loading.value = true
  const res = await getInterviewDetail(id)
  if(res.code == 200){
    interviewDetail.value = res.data
    loading.value = false
  }else{
    uni.showToast({
      title: res.msg,
      icon: 'none'
    })
  }
}

const fetchInterviewQuestionsAndAnswers = async (id) => {
  const res = await getInterviewQuestionsAndAnswers(id)
  if(res.code == 200){
    interviewDetail.value.questions = res.rows
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight
  
  // 获取页面参数
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  console.log(page.options, 'page.options')
  if (page.options && page.options.interviewId) {
    console.log(page.options, 'page.options')
    interviewId.value = page.options.interviewId
    fetchInterviewQuestionsAndAnswers(interviewId.value)
    fetchInterviewDetail(interviewId.value)
  } else {
    // 没有ID参数，使用模拟数据
    fetchInterviewDetail('mock-id')
  }
})
</script>

<style lang="scss" scoped>
.history-detail-page {
  min-height: 100vh;
  background-color: #f5f7fb;
  padding-bottom: 100rpx;
  
  .content {
    padding: 20rpx;
  }
  
  .interview-header {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .position {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      display: block;
    }
    
    .info-row {
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      
      .time {
        font-size: 24rpx;
        color: #999;
      }
      
      .score {
        .score-label {
          font-size: 26rpx;
          color: #666;
        }
        
        .score-value {
          font-size: 30rpx;
          color: #ff9500;
          font-weight: 500;
        }
      }
    }
  }
  
  .chat-container {
    margin-bottom: 20rpx;
    
    .chat-item {
      margin-bottom: 30rpx;
      
      .question-item, .answer-item {
        display: flex;
        margin-bottom: 20rpx;
      }
      
      .question-item {
        justify-content: flex-start;
      }
      
      .answer-item {
        justify-content: flex-end;
      }
      
      .avatar {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        font-weight: 500;
      }
      
      .interviewer-avatar {
        background-color: #5ac725;
        color: #fff;
        margin-right: 16rpx;
      }
      
      .user-avatar {
        background-color: #4a90e2;
        color: #fff;
        margin-left: 16rpx;
      }
      
      .message {
        max-width: 70%;
        padding: 16rpx 24rpx;
        border-radius: 12rpx;
        position: relative;
        
        .message-text {
          font-size: 28rpx;
          line-height: 1.5;
        }
      }
      
      .question-message {
        background-color: #fff;
        color: #333;
        
        &::before {
          content: '';
          position: absolute;
          left: -10rpx;
          top: 20rpx;
          border-width: 10rpx;
          border-style: solid;
          border-color: transparent #fff transparent transparent;
        }
      }
      
      .answer-message {
        background-color: #e1f3ff;
        color: #333;
        
        &::after {
          content: '';
          position: absolute;
          right: -10rpx;
          top: 20rpx;
          border-width: 10rpx;
          border-style: solid;
          border-color: transparent transparent transparent #e1f3ff;
        }
      }
    }
  }
  
  .analysis-section {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .section-title {
      margin-bottom: 16rpx;
      
      text {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        position: relative;
        padding-left: 20rpx;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 24rpx;
          background-color: #5ac725;
          border-radius: 3rpx;
        }
      }
    }
    
    .analysis-content {
      .analysis-text {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .back-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #5ac725;
      color: #fff;
      font-size: 30rpx;
      border-radius: 40rpx;
    }
  }
  
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    
    .loading-content {
      padding: 30rpx 40rpx;
      background-color: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1);
      
      text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}
</style> 